<!--
 * @Descripttion: 字典维护
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-07-26 14:51:33
 * @LastEditors: GW
 * @LastEditTime: 2021-10-12 11:18:32
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="addType(0)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增字典</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="addType(1)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改字典</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="onChangeTypeFun(0)">
                                <a-icon class="btns-icon" type="check-circle" />
                                <div class="btns-text">启用字典</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="onChangeTypeFun(2)">
                                <a-icon class="btns-icon" type="disconnect" />
                                <div class="btns-text">禁用字典</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="saveSort">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存排序</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="removeType">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除字典</div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;"></div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="add">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增键</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editClick()">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改键</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="removeData">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除键</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="auditClick(0)">
                                <a-icon class="btns-icon" type="check-circle" />
                                <div class="btns-text">启用键</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="auditClick(1)">
                                <a-icon class="btns-icon" type="disconnect" />
                                <div class="btns-text">禁用键</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="syncFun">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="credentials-wrapper" id="documents-wrapper">
                <a-row style="border:1px solid #ddd;min-height:500px">
                    <a-col :span="14">
                        <section class="tabbl drag-table" style="border-right:1px solid #ddd;min-height:500px">
                            <a-table id="route_tb" :columns="columnsList" :data-source="listData" :customRow="customTable" bordered :scroll="{ x: 500, y: 462 }" :rowClassName="rowClassName" :pagination="false">
                                <div slot="filterDropdown" slot-scope="{setSelectedKeys,selectedKeys,confirm,clearFilters,column}" style="padding: 8px">
                                    <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="searchName" style="width: 188px; margin-bottom: 8px; display: block;" @change="e =>setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() =>handleSearch(selectedKeys, confirm, column.dataIndex)" />
                                    <a-button size="small" style="width: 90px; margin-right: 8px" @click="() => handleReset(clearFilters)">
                                        重置
                                    </a-button>
                                    <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() =>handleSearch(selectedKeys, confirm, column.dataIndex)">
                                        搜索
                                    </a-button>

                                </div>
                                <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
                                <template slot="dictType" slot-scope="text">
                                    {{text == 1?'下拉':text==2?'单选':''}}
                                </template>
                                <template slot="status" slot-scope="text">
                                    <a-tag v-if="text==0" color="green">
                                        启用
                                    </a-tag>
                                    <a-tag v-else color="red">
                                        禁用
                                    </a-tag>
                                </template>
                                <template title="上下拖动排序" slot="sort" slot-scope="text" style="cursor: move;">{{text}}</template>
                            </a-table>
                        </section>
                    </a-col>
                    <a-col :span="10" style="padding:10px;">
                        <section>
                            <div class="table-box">
                                <a-table id="process_edit_tb" class="atable-edit" :columns="columns" :customRow="customClick" :data-source="dataSource" :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}" :pagination="false" bordered :scroll="{ x: 500, y: 462 }">
                                    <template slot="status" slot-scope="text">
                                        <a-tag v-if="text == 0" color="green">启用</a-tag>
                                        <a-tag v-if="text == 1" color="red">删除</a-tag>
                                        <a-tag v-if="text == 2" color="red">禁用</a-tag>
                                    </template>
                                </a-table>
                            </div>
                        </section>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--新增修改字典-->
        <drag-modal v-model="show" @cancel="typeCancel" :title="typeTitle" @ok="typeOk" width="500px">
            <a-form class="ant-advanced-search-form zidian-max" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" @submit="save" layout="horizontal">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="字典名称">
                            <a-input v-model="editType.dictName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典编码">
                            <a-input v-model="editType.dictCode " />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典类型">
                            <a-select v-model="editType.dictType">
                                <a-select-option :value="1">
                                    下拉
                                </a-select-option>
                                <a-select-option :value="2">
                                    单选
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="模块描述">
                            <a-input v-model="editType.moduleType " />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-show="userInfo.roles[0] == '超级管理员'">
                        <a-form-item label="是否可编辑">
                            <a-radio-group name="radioGroup" :default-value="true" style="margin-left:10px;" v-model="editType.isUpdate">
                                <a-radio :value="true">
                                    是
                                </a-radio>
                                <a-radio :value="false">
                                    否
                                </a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-item label="字典状态">
                            <a-switch checked-children="启用" un-checked-children="禁用" :checked="editType.status==0" @change="onChangeTypeFun" />
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="字典描述">
                            <a-textarea placeholder="请输入字典描述" :rows="3" v-model="editType.remarks" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <template slot="footer">
                <div>
                    <a-button type="primary" @click="typeOk">保存</a-button>
                    <a-button @click="typeCancel" class="margin-left-10">关闭</a-button>
                </div>
            </template>
        </drag-modal>

        <!--新增和修改弹窗-->
        <drag-modal v-model="visible" @cancel="cancel" :title="title" @ok="ok" width="500px">
            <a-form class="ant-advanced-search-form zidian-max" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" @submit="save" layout="horizontal">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="字典名称">
                            <a-input readonly disabled v-model="editData.dictName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典编码">
                            <a-input readonly disabled v-model="editData.dictCode" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典类型">
                            <a-select readonly disabled v-model="editData.dictType">
                                <a-select-option :value="1">
                                    下拉
                                </a-select-option>
                                <a-select-option :value="2">
                                    单选
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典键">
                            <a-input placeholder="请输入字典键" v-model="editData.dictLabel" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="字典值">
                            <a-input placeholder="请输入字典值" v-model="editData.dictValue" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="input-number-box">
                        <a-form-item label="排序">
                            <a-input-number placeholder="请输入排序" v-model="editData.showSort" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="是否默认值">
                            <a-radio-group name="radioGroup" :default-value="false" style="margin-left:10px;" v-model="editData.isDefault">
                                <a-radio :value="true">
                                    是
                                </a-radio>
                                <a-radio :value="false">
                                    否
                                </a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <template slot="footer">
                <div>
                    <a-button type="primary" @click="saveData">确认</a-button>
                    <a-button @click="cancel" class="margin-left-10">关闭</a-button>
                </div>
            </template>
        </drag-modal>
        <!--加载中-->
        <div class="loading-wrapper" v-if="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import { typeList, typeSave, typeDelete, typeEnable, typeDisable, sortFun } from "@/api/dictType";
import { keyList, keySave, keyDelete, keyEnable, keyDisable } from "@/api/dictData";
import { Controlwidth } from "@/utils/antTableComponents";
import Sortable from 'sortablejs';
import { getAllDict } from "@/api/dictData";
export default {
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            show: false,
            typeTitle: '新增字典',
            editType: {
                dictType: 1,
                isUpdate: false,
                dictName: null,
                dictCode: null,
                moduleType: null,
                remarks: null,
            },
            searchName: '',//搜索字典名
            loading: false,


            customTable: (record, index) => {
                return {
                    on: {
                        click: e => {
                            this.selectedRowKeys = [];
                            this.selectedData = [];
                            this.mouseIndex = record.id;
                            this.orderId = record.id;
                            this.editType = _.cloneDeep(record);
                            console.log(record)
                            this.editData.dictName = record.dictName;
                            this.editData.dictCode = record.dictCode;
                            this.editData.dictType = Number(record.dictType);
                            this.getdetailsList();
                        }
                    }
                };
            },
            title: '新增字典标签',
            pageStatus: null,//操作状态
            listData: [],
            dataSource: [],
            mouseIndex: null,
            orderId: null,
            nowRecord: [],
            columnsList: [
                {
                    title: "序号",
                    dataIndex: "index",
                    width: 30,
                    align: 'center',
                    scopedSlots: { customRender: 'sort' },
                    customRender: (text, record, index) => {
                        return index + 1;
                    }
                },
                {
                    title: "字典名称",
                    dataIndex: "dictName",
                    ellipsis: true,
                    width: 60,
                    // sorter: (a, b) => {
                    //     return a.dictName.length - b.dictName.length;
                    // },
                    scopedSlots: {
                        filterDropdown: "filterDropdown",
                        filterIcon: "filterIcon"
                    }
                },
                {
                    title: "字典编码",
                    dataIndex: "dictCode",
                    ellipsis: true,
                    width: 50,
                    ellipsis: true,
                },
                {
                    title: "字典类型",
                    dataIndex: "dictType",
                    width: 40,
                    align: 'center',
                    scopedSlots: { customRender: 'dictType' }
                },
                {
                    title: "字典状态",
                    dataIndex: "status",
                    width: 40,
                    align: 'center',
                    scopedSlots: { customRender: 'status' }
                },
                {
                    title: "字典描述",
                    dataIndex: "remarks",
                    width: 60,
                    ellipsis: true,
                    align: 'left',
                }, {
                    title: "模块描述",
                    dataIndex: "moduleType",
                    width: 60,
                    ellipsis: true,
                    align: 'left',
                }
            ],
            pagination: {
                size: "small"
            },
            columns: [
                {
                    title: "字典键",
                    dataIndex: "dictLabel",
                    width: 100,
                    ellipsis: true
                },
                {
                    title: "字典值",
                    dataIndex: "dictValue",
                    width: 100,
                    ellipsis: true
                },
                // {
                //     title: "是否系统字典",
                //     dataIndex: "isSys",
                //     width: 100,
                //     customRender: (text, row, index) => {
                //         return text ? "是" : "否";
                //     }
                // },
                {
                    title: "是否默认",
                    dataIndex: "isDefault",
                    width: 100,
                    ellipsis: true,
                    customRender: (text) => {
                        return text ? '是' : '否';
                    }
                },
                {
                    title: "排序",
                    dataIndex: "showSort",
                    width: 100,
                    ellipsis: true,
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    width: 100,
                    align: 'center',
                    scopedSlots: { customRender: 'status' }
                }
            ],
            visible: false,
            editData: {
                // dictName: null,
                // dictLabel: null,
                // dictType: null,
                // dictValue: null,
                // description: null,
                // moduleType:null
            },
            selectedRowKeys: [],
            selectedData: [],
        };
    },
    created () {
        // this.tableInit(); //初始化表格
        // this.editColumnArray(this.columns);


        this.getList(); //获取工序路线列表
        if (this.userInfo.roles[0] == '超级管理员') {
            this.columnsList.push({
                title: "租户可编辑",
                dataIndex: "isUpdate",
                width: 40,
                align: 'center',
                customRender: (text, row, index) => {
                    return text ? "是" : "否";
                }
            })
        }
        console.log(this.userInfo);
    },
    updated () {
        Controlwidth("route_tb", 50);
        Controlwidth("process_edit_tb", 50);
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions
        })
    },
    methods: {
        getList (searchArray) {
            //获取字典列表
            let postData = {
                "page.current": 1,
                "page.size": -1
            };
            if (searchArray) {
                if (Object.keys(searchArray).length > 0) {
                    postData = Object.assign(postData, searchArray);
                }
            }
            this.loading = true;
            typeList(postData).then(response => {
                if (response.code === 200) {
                    this.loading = false;
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.listData = records;
                    this.listData.forEach(item => {
                        item.key = item.id;
                    });
                    if (this.orderId) {
                        this.editType = _.cloneDeep(records.filter(d => d.id == this.orderId)[0]);
                        console.log(this.editType);
                        if (this.editType) {
                            this.editData.dictName = this.editType.dictName;
                            this.editData.dictCode = this.editType.dictCode;
                            this.editData.dictType = Number(this.editType.dictType);
                        } else {
                            this.editType = {
                                dictName: null,
                                dictCode: null,
                                dictType: 1,
                            }
                            this.dataSource = [];
                        }
                    }
                    //如果有列表数据，选中第一条
                    if (records.length > 0 && this.orderId == null) {
                        console.log('第一次进入页面')
                        this.mouseIndex = records[0].id;
                        this.orderId = records[0].id;
                        this.editType = _.cloneDeep(records[0]);
                        this.editData = _.cloneDeep(records[0]);
                        this.getdetailsList();
                    }
                    this.drag();
                }
            }).catch(error => { });
        },
        addType (t) {
            //新增字典
            if (t == 0) {
                this.typeTitle = '新增字典';
                this.editType = {
                    dictType: 1,
                    isUpdate: false,
                }

                // for (let index = 0; index < 20; index++) {
                //     this.editType = {
                //         dictName: `销售类型${index}`,
                //         dictCode: 1 + index,
                //         dictType: index % 2 == 0 ? 1 : 2,
                //         remarks:`字典说明${index * index}`
                //     }
                //     this.typeOk()
                // }
            } else {
                if (this.mouseIndex) {
                    this.typeTitle = '修改字典';
                } else {
                    this.$message.warning('请选择需要修改的字典');
                    return;
                }
            }
            this.show = true;
        },
        typeCancel () {
            //关闭字典弹窗
            this.show = false;
        },
        typeOk () {
            //保存字典
            if (!this.editType.dictName) {
                this.$message.warning('请输入字典名称')
                return false;
            }

            if (!this.editType.dictCode) {
                this.$message.warning('请输入字典编码')
                return false;
            }

            if (!this.editType.dictType) {
                this.$message.warning('请选择字典类型')
                return false;
            }
            typeSave(this.editType).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    // this.selectedRowKeys = [];
                    // this.selectedRows = [];
                    //刷新 列表
                    this.getList();
                    this.typeCancel();
                    this.getAll();//重新刷新localStorage
                }
            }).catch(res => {

            })
        },
        onChangeTypeFun (e) {
            //启用禁用字典
            console.log(this.orderId, e);
            if (!this.orderId) {
                this.$message.warning('请选择一条数据');
                return;
            }
            if (e == 0) {
                typeEnable({ id: this.orderId }).then(response => {
                    if (response.code === 200) {
                        this.$message.success('启用成功')
                        //刷新 列表
                        this.getList();
                    }
                })
            } else {
                typeDisable({ id: this.orderId }).then(response => {
                    if (response.code === 200) {
                        this.$message.success('禁用成功')
                        //刷新 列表
                        this.getList();
                    }
                })
            }
        },
        removeType () {
            //删除字典
            let that = this;

            this.$confirm({
                title: '确认',
                content: '您确定要删除该字典吗？',
                onOk () {
                    typeDelete({ id: that.orderId }).then(response => {
                        if (response.code === 200) {
                            that.$message.success('删除成功');
                            //刷新 列表
                            that.mouseIndex = null;
                            that.orderId = null;
                            that.editType = [];
                            that.editData.dictName = null;
                            that.editData.dictType = null;
                            that.editData.dictCode = null;
                            that.getList();
                        } else {
                            that.$message.warning(response.message);
                        }
                    })
                },
                onCancel () { },
            });
        },








        cancel () {
            this.visible = false;
            //关闭的时候清空值
            this.clearEditData();
        },
        clearEditData () {
            this.editData.dictLabel = null;
            this.editData.dictValue = null;
            this.editData.description = null;
            this.editData.isDefault = false;
        },
        onSelectChange (keys, data) {
            this.selectedRowKeys = keys;
            this.selectedData = data;
            console.log(keys, data);
        },

        add () {
            //新增字典明细
            this.title = '新增字典标签';
            this.pageStatus = 'add';//新增
            this.visible = true;

        },
        editClick () {
            //修改字典明细
            this.title = '修改字典标签';
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            this.visible = true;
            this.pageStatus = 'edit';//修改
            console.log(this.editData, this.selectedData[0]);
            // this.editData = Object.assign(this.editData, _.cloneDeep(this.selectedData[0]));
            let ed = _.cloneDeep(this.editData);
            let editDataTemp = _.cloneDeep(this.selectedData[0]);
            editDataTemp.dictName = ed.dictName;
            editDataTemp.dictCode = ed.dictCode;
            editDataTemp.dictType = Number(ed.dictType);

            this.editData = editDataTemp;
        },
        saveData () {
            //保存字典明细
            let requestData = this.editData;
            requestData.dictTypeId = this.orderId;

            if (this.pageStatus == 'add') {
                requestData.id = null;
            }
            keySave(requestData).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    this.visible = false;
                    this.selectedRowKeys = [];
                    this.selectedData = [];
                    //关闭的时候清空值
                    this.clearEditData();
                    this.getdetailsList();
                    this.getAll();//重新刷新localStorage
                } else {
                    this.$message.error(response.message);
                }
            })
                .catch(e => {
                    // this.isSaveRun = true;
                });
        },
        getdetailsList () {
            //获取字典明细
            let requestData = {
                'page.size': 100,
                dictTypeId: this.orderId
            };
            keyList(requestData).then(response => {
                if (response.code === 200) {

                    this.dataSource = response.data.records;
                } else {
                    this.$message.error(response.message);
                }
            }).catch(e => {
                // this.isSaveRun = true;
            });
        },
        removeData () {
            //删除字典明细
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "是否确认删除该字典键值吗？",
                content: "",
                onOk () {
                    keyDelete({ id: _this.selectedData[0].id }).then(response => {
                        if (response.code === 200) {
                            _this.$message.success("删除成功");
                            _this.selectedRowKeys = [];
                            _this.selectedData = [];
                            _this.getdetailsList();
                        } else {
                            _this.$message.error(response.message);
                        }
                    })
                        .catch(e => { });
                },
                onCancel () { }
            });
        },
        rowClassName (record, index) {
            return this.mouseIndex == record.id ? "hoverRowStyl" : "";
        },
        handleSearch (key, confirm, col) {
            //table搜索
            confirm();
            console.log(key, confirm, col);
            this.searchName = key[0];

            let searchText = { dictName: this.searchName };
            this.getList(searchText);
        },
        handleReset (clearFilters) {
            clearFilters();
            this.searchName = "";
            this.getList();
        },
        handleSearchStatus (key, confirm, col) {
            //状态搜索
            confirm();
            console.log(key, confirm, col);
            // this.searchStatus = key[0];

            let searchText = {
                status: this.searchStatus == "2" ? "" : this.searchStatus
            };
            this.getList(searchText);
        },
        handleChangeStatus (e, v) {
            console.log(e);
            if (e == "2") {
                this.searchStatus = "";
            }
            this.searchStatus = e;
        },
        auditClick (type) {
            //启用，禁用
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            if (type == 0) {
                keyEnable({ id: this.selectedData[0].id }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('启用成功');
                        this.selectedRowKeys = [];
                        this.selectedData = [];
                        this.getdetailsList();
                    }
                })
            } else {
                keyDisable({ id: this.selectedData[0].id }).then(res => {
                    if (res.code === 200) {
                        this.$message.warning('禁用成功');
                        this.selectedRowKeys = [];
                        this.selectedData = [];
                        this.getdetailsList();
                    }
                })
            }

        },
        syncFun () {
            //刷新
            this.getList();
        },
        // 拖动
        drag () {
            // 首先获取需要拖拽的dom节点
            const el1 = document.querySelectorAll('.drag-table .ant-table-tbody')[0];
            if (!el1) return false;
            this.isDrag = true;
            Sortable.create(el1, {
                disabled: false, // 是否开启拖拽
                ghostClass: 'sortable-ghost', //拖拽样式
                animation: 150, // 拖拽延时，效果更好看
                group: { // 是否开启跨表拖拽
                    pull: false,
                    put: false
                },
                onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
                    let arr = this.listData; // 获取表数据

                    let removeItem = arr.splice(e.oldIndex, 1)[0];
                    console.log(removeItem)
                    console.log(e)

                    arr.splice(e.newIndex, 0, removeItem); // 数据处理
                    //提前 赋值一个带值的数组（BUG 修复）
                    this.listData = [{}];
                    this.$nextTick(function () {
                        this.listData = [...arr];
                        this.listData.map((item, index) => {
                            item.showSort = index + 1;
                            // item.isEdit = true;
                        });
                    });
                }
            });
        },
        saveSort () {
            //保存排序
            let requestData = [];
            this.listData.forEach((item, index) => {
                requestData.push({ id: item.id, showSort: index + 1 })
            });

            sortFun(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('排序保存成功');
                    this.getList();
                }
            })
        },
        //获取字典数据
        getAll () {
            getAllDict().then(res => {
                if (res.code === 200) {
                    localStorage.setItem('dict', JSON.stringify(res.data));
                }
            })
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .zidian-max {
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
    .credentials-wrapper {
        padding: 12px 10px 0;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .ant-form-item {
            margin: 0;
        }
        .mask-archives {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // background: rgba(220, 53, 69, 0.5);
            background: rgba(0, 0, 0, 0);
            z-index: 2;
        }
        .ant-table-tbody > tr > td {
            cursor: pointer;
        }
        .hoverRowStyl {
            background-color: rgba(24, 144, 255, 0.2);
            td {
                color: #222;
            }
        }
        .ant-table colgroup > col.ant-table-selection-col {
            width: 30px;
        }
        .edit-mask-route {
            width: calc(100% - 22px);
            height: calc(100% - 50px);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 800;
            background: rgba(255, 255, 255, 0.1);
        }
    }
    .tabbl {
        // .ant-table-scroll {
        //     height: 366px !important;
        // }
        padding: 10px;
        .ant-table-wrapper .ant-table-pagination {
            text-align: right !important;
        }
    }
    .order-dynamic-form-wrapper {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form-item-label,
        .ant-form-item-control {
            line-height: 32px;
        }
    }

    .atable-edit {
        .ant-table-tbody > tr > td {
            padding: 0px 2px !important;
            overflow: hidden;
        }
    }

    .drag-line-top td {
        border-top: 1px dashed #1890ff;
    }

    .drag-line-bottom td {
        border-bottom: 1px dashed #1890ff !important;
    }
    .input-number-box {
        .ant-input-number {
            width: 377px;
            height: 32px !important;
            line-height: 32px !important;
        }
    }
</style>
